<template>
  <li class="song-item" @click="$emit('update:music', {item,index});$emit('update:playlist');">
    <div>
      <h5 :title="item.name">
        {{ item.name }}
        <span class="alias-name" v-if="item.song.alias.length">
          ({{ item.song.alias[0] }})
          </span>
        
      </h5>
      <p>
        <span v-for="(artist, index) in item.song.artists" :key="index">
          <template v-if="index"> / </template>{{ artist.name }}
        </span>
        -{{ item.song.album.name }}
      </p>
    </div>
    <div class="icon">
        <i class="iconfont icon-zanting" 
        v-if="!paused && currentMusic && currentMusic.id == item.id"
        style="color:pink"
        >
        </i>
        <i class="iconfont icon-bofang" v-else></i>
    </div>
  </li>
</template>

<script>
export default {
  props: ["item", 'index',"currentMusic", "paused"],
};
</script>

<style lang="less" scoped>
.song-item {
  padding: 7px 0px 0px 10px;
  display: flex;
  
  p {
    font-size: 12px;
    color: rgb(146, 143, 143);
    margin-top: 5px;
  }
  div:first-child {
    h5,span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  > div {
    border-bottom: 1px rgb(224, 223, 223) solid;
    padding-bottom: 7px;
  }
}
.alias-name {
  color: rgb(146, 143, 143);
}
.icon {
  float: right;
  width: 44px;
  height: 55px;
    .iconfont{
      font-size: 22px;
      color: #ccc;
    }
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>